import type { FunctionalComponent } from 'vue'
import type { SvgIconProps } from './index.d'
// svg 精灵图页面脚本
// 不引入不显示图标
// 获取所有 SymbolId
import 'virtual:svg-icons-register'
// => ['icon-icon1','icon-icon2','icon-icon3']

export const SvgIcon: FunctionalComponent<Partial<SvgIconProps>> = (props) => {
  const { name, width, height, color, size = '20px' } = props
  const symbolId = computed(() => `#icon-svg-${name}`)

  return (
    <svg
      aria-hidden="true"
      class="svg-icon"
      width={width || size}
      height={height || size}
    >
      <use xlinkHref={symbolId.value} fill={color} />
    </svg>
  )
}
